<template>
  <div>
    <div style="font-size:18px;">投诉列表</div>
    <hr>
    <br>
    <div class="filter-container">
      <el-select clearable v-model="listQuery.param.schoolId"
      placeholder="请选择学校">
          <el-option
          v-for="item in schoolOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          </el-option>
      </el-select>
      <el-input @keyup.enter.native="handleFilter" style="width: 150px;" class="filter-item" placeholder="输入投诉人姓名" v-model="listQuery.param.name">
      </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="店铺名" v-model="listQuery.param.shopName">
      </el-input>
      <!-- <div class="left filter-item"> -->
      <el-date-picker
        style="width: 200px;display: inline-block;"
        v-model="listQuery.param.startTime"
        type="date"
        placeholder="选择开始时间">
      </el-date-picker>
    <!-- </div> -->
    <!-- <div class="left filter-item"> -->
      <el-date-picker
        style="width: 200px;display: inline-block;"
        v-model="listQuery.param.endTime"
        type="date"
        placeholder="选择结束时间">
      </el-date-picker>
    <!-- </div> -->
      <el-button class="filter-item" style="margin-left: 30px;" type="primary"  icon="search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table
      :data="tableData"
      stripe border
      style="width: 100%">
      <el-table-column type="expand">
        <template scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="投诉商品Id:" >
              <span>{{props.row.productId}}</span>
            </el-form-item>
            <el-form-item label="投诉商品名:">
              <span>{{props.row.productName}}</span>
            </el-form-item>
            <el-form-item label="投诉店铺:" >
              <span>{{props.row.shopName}}</span>
            </el-form-item>
            <el-form-item label="投诉内容:">
              <span>{{props.row.content}}</span>
            </el-form-item>
            
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="投诉人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="schoolName"
        label="所属学校"
        width="180">
      </el-table-column>
      <el-table-column
        prop="content"
        label="反馈内容">
      </el-table-column>
      <el-table-column
        prop="createDateName"
        label="投诉日期"
        width="220">
      </el-table-column>
      <el-table-column align="center" label="操作" width="160">
        <template scope="scope">
          <!-- <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> -->
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    

  </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';

  export default {
    data() {
        return {
            num8: 1,
            schoolOptions: [],
            ruleForm2: {
              pass: '',
              checkPass: '',
              age: ''
            },
            listQuery: {
              pageNumber: 1,
              pageSize: 1000,
              param: {
                type: 1,    //不传就是全部投诉，传1就是商城，传2是二手
                name: '',
                shopName: '',
                startTime: null,
                endTime: null,
                schoolId: ''
              },
            },
            labelPosition: 'right',
            formLabelAlign: {
              name: '',
              region: '',
              type: ''
            },
            dianpuName: '',
            tableData: [

            ]
        };
    },
    mounted(){
        this.getschoollist();
        this.fetchList()
    },
    methods: {
      getschoollist(){
          let self = this;
          let _data = {
              pageNumber: 1,
              pageSize: 10000,
          }
          self.myajax("/school/list",_data,function(res){
              console.log(res)
              if(res.code==1000){
                  self.schoolOptions=res.data.list;
              }
          });
      },
      fetchList() {
        let self=this;
        self.myajax("/complain/list",this.listQuery,(res)=>{
          console.log(res)
          if(res.code == 1000){
            self.tableData = res.data.list
          }else{

          }
        })
      },
      handleFilter() {
        this.fetchList()
      },
      handleDelete(row) {
        console.log(row);
        let self = this
        this.$confirm('此操作将永久删除该投诉, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.myajax("/complain/deleteById",{id:row.id},(res)=>{
            console.log(res)
            if(res.code==1000){
              self.fetchList()
              self.$message({
                type: 'success',
                message: '删除成功!',
                duration: 1000
              });
            }
          })
        }).catch(() => {
        
        }); 
      },
    }
  };
</script>
<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .el-input-number .el-input__inner {
      padding: 3px 36px;
      text-align: center;
    }
    /*.el-form-item {
      margin-bottom: 0;
    }*/
    .el-form-item__label{
      margin-right: 20px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 49%;
    }
    .el-form--inline .el-form-item {
        display: inline-block;
        vertical-align: top;
    }
    .table_container{
        padding: 20px;
    }
    /*.el-form--inline .el-form-item .el-form-item__content{
      display: block;
    }*/
</style>
